/**
 * Created by zhangyuhan on 2017/01/10.
 */
.text-3d {
  /*中间层（蓝色那个）*/
  z-index: 2;
  color: deepskyblue;
  font-size: 8em;
  position: relative;
  &::before{
    /*最高层（白色那个）*/
    z-index: 3;
    position: absolute;

    content: attr(data-text); /*获取value*/
    color: rgba(250, 250, 250, 1); /*设置value的颜色*/
    text-shadow: 3px 3px 10px rgba(135, 135, 135, 1); /*用来突出文本的阴影*/

    transition: transform 0.3s; /*定义过渡动画的属性名,时长*/
    transform-origin: 0% 100%; /*设置旋转的基准点*/
  }
  &::after {
    /*最底层*/
    /*用于模拟阴影效果*/
    z-index: 1;
    position: absolute;
    content: attr(data-text); /*获取value*/
    color: rgba(144, 144, 144, 0.3); /*设置value的颜色(0.2等于透明度20%)*/
    left: 0;
    top: 0;
    transition: transform 0.3s; /*定义过渡动画的属性名,时长*/
    transform-origin: 0% 50%; /*设置旋转的基准点*/
  }
  &:hover{
    &::before{
      transform: rotateY(40deg);
    }
    &::after{
      transform: rotateX(20deg) rotateY(40deg);
    }
  }
  &.right{
    &::before{
      transform-origin: 50% 0;
    }
    &::after{
      transform-origin: 100% 0;
    }
  }
}
